import React from "react";
import { message } from "antd";
import vis from "vis";
import { api as http } from "../../fetch";
let relation = { nodes: [], edges: [] }; //设置关联图的数据（nodes为节点、edges为关联线）
const visDate = {
  //后端返回的数据格式
  nodes: [
    {
      image: IconDomain,
      label: "域名",
      size: 25,
      id: 1,
    },
    {
      image: IconDomain,
      label: "域名",
      size: 25,
      id: 2,
    },
  ],
  edges: [
    {
      arrows: "to",
      from: "1",
      to: "2",
    },
  ],
};
class Vis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      relation: { nodes: [], edges: [] },
      nodeheight: window.screen.height - 326, //设置关联图高度为浏览器的高低减去顶部的高度
    };
  }
  componentDidMount() {
    this.props.onRef(this);
    let nodeheight = window.screen.height - 326;
    this.setnode();
  }
  setnode = (url, name) => {
    //请求后端接口
    http
      .get(url, { params: { name: name } })
      .then((response) => {
        if (response.code === 1) {
          response.data.nodes.map((val, index) => {
            val.image = IconDomain;
            val.is_root ? (val.size = 70) : (val.size = 150);
          });
          visDate.nodes = response.data.nodes;
          visDate.edges = response.data.organ;
          let container = document.getElementById("graph");
          relation = { nodes: new vis.DataSet(), edges: new vis.DataSet() };
          let data = this.findNode(visDate);
          let option = {
            // autoResize: true,
            width: "100%",
            height: this.state.nodeheight + "px",
            nodes: {
              shape: "box",
              // shape: 'image',
              level: 11,
              font: {
                size: 18,
                color: "red",
                // margin:100
              },
              borderWidth: 2,
              // widthConstraint:{
              // minimum:150,
              // maximum:150
              // },
              widthConstraint: 150, //设置节点的宽度，超出换行
              fixed: false, //设置节点固定,如果为真，则节点不会沿X方向移动
              mass: 2,
              chosen: false,
              labelHighlightBold: false,
              // margin:10
              // physics: true,
            },
            edges: {
              smooth: {
                enabled: false, //设置线是否可弯曲
                type: "dynamic",
              },
              color: "#fff",
              arrows: {
                to: {
                  scaleFactor: 0.6, //箭头大小
                },
              },
            },
            layout: {
              randomSeed: 1, //配置每次生成的节点位置都一样，参数为数字1、2等
              // hierarchical: {
              // direction: 'UD',//UD:上下 DU:下上 LR:左右 RL:右左
              // sortMethod: 'directed'
              // }, //层级结构显示}
            },
            physics: {
              enabled: true, //节点不能重叠,整体图回弹效果
              solver: "forceAtlas2Based",
              barnesHut: {
                gravitationalConstant: -4000,
                centralGravity: 0.3,
                springLength: 120,
                springConstant: 0.04,
                damping: 0.09,
                avoidOverlap: 0,
              },
            },
            interaction: {
              hover: true, //鼠标移过后加粗该节点和连接线
              // dragNodes:false,//是否能拖动节点
              selectable: false, //是否可以点击选择
              hover: false,
              // chosen:false,
              // labelHighlightBold:false
            },
          };
          let network = new vis.Network(container, data, option);
        } else {
          message.error(response.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
  findNode = (data, name) => {
    //根据名称调用后端接口根据自己的业务来
    data.nodes.map((value, index) => {
      relation.nodes.update({
        chosen: false,
        widthConstraint: value.size,
        id: value.id,
        // image: value.image,
        label: value.label,
        size: value.size,
        // level:Number(index),
        shape: value.is_root ? "circle" : "box",
      }); //区分根节点和普通节点，根节点为圆形，普通节点为长方形
      return relation;
    });
    relation.edges.update(data.edges);
    return relation;
  };
  render() {
    return (
      <div style={{ display: "flex" }}>
        <div
          id="graph"
          style={{ justifyContent: "center", width: "100%" }}
        ></div>
      </div>
    );
  }
}

export default Vis;
